<template>
    <div class="pp">
        <JHeader></JHeader>
        <div class="bbs">
            <img src="/asset/imgs/b3.svg" class="p-img" />
            <div class="tt3">
                {{ $t('message.Login.title') }}
            </div>
            <v-form validate-on="submit lazy" @submit.prevent="onSubmit" class="form-width">
                <div class="tip">{{ $t("message.Login.email") }}</div>

                <JInput v-model="email" :placeholder="$t('message.Login.iptEmail')" button="" :err="err"></JInput>

                <!-- <v-btn class="n-btn" color="primary" type="submit">
                    {{ $t("message.Login.next") }}
                </v-btn> -->
                <JButton :label="$t('message.Login.next')" class="n-btn" @click="onSubmit"></JButton>

                <div class="no-ac">
                    <!-- 还没有账户？ -->
                    {{ $t("message.Login.notUser") }}
                    <span class="no-rege" @click="gotoRegister">
                        <!-- 免费注册 -->
                        {{ $t("message.Login.enroll") }}
                    </span>
                </div>
                <Other></Other>
            </v-form>
        </div>
        <LoginVerify :show="shows" @close="onHide"></LoginVerify>
    </div>
    <!-- <iframe :src="link" v-if="link"></iframe> -->
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Star from "@/assets/Star.png";
import { useAccount } from "@/stores/account";
import Pop from "@/components/pop/index.vue";
import Other from "../Other.vue";
import { toast } from "@/components/toast/toast";
import JInput from "@/components/j-input/index.vue";
import JButton from "@/components/j-button/index.vue";
import JCheckbox from "@/components/j-checkbox/index.vue";
import LoginVerify from "../LoginVerify.vue"
import JHeader from "../j-header/index.vue";
import { isValidEmail } from "@/comm/format";
import { get, post } from "@/comm/request";
import { URL_REGISTER_CHECK, URL_USER_EXIST } from "@/comm/api";
import { Notify } from "@/components/y-notify/script";
import i18n from "@/locals";
import { useRouter } from "vue-router";
import { useScale } from "../hooks/scales";
const emailStr = ref("");
const agree = ref(false);
const err = ref("");
const router = useRouter();
const scale = useScale()

onMounted(() => {
    err.value = "";
});

const shows = ref(false);
const onHide = ()=>{
    shows.value = false;
}


const props = defineProps({
    isClose: {
        type: Boolean,
        default: true
    }
})


// const isRegister = ref(true);
const account = useAccount();
const email = ref(localStorage.getItem("email") || "");
const emailRules = ref([
    (value: string) => {
        if (value) return true;
        return "E-mail is requred.";
    },
    (value: string) => {
        if (/.+@.+\..+/.test(value)) return true;
        return "E-mail must be valid.";
    }
]);

const onClose = () => {
    account.changePopLogin(false);
    err.value = "";
};

const gotoRegister = () => {
    router.push("/register");
};

const busyAlert = () => {
    Notify.alert(i18n.global.t("message.Register.emailTime"), "warning", 3500)
}
const onSubmit = async () => {
    // if (!agree.value) {
    //     toast("请先同意用户协议")
    //     return;
    // }
    if (!isValidEmail(email.value)) {
        // err.value = "邮箱不合法";
        err.value = i18n.global.t("message.Login.illegal");
        return;
    }
    try {
        let obj: any = await post(URL_USER_EXIST, { email: email.value }, true);
        console.log("obj", obj);
        //10012 代表邮箱已经注册可以进行登录
        if (obj.code == 200) {
            localStorage.setItem("email", email!.value + "");
            // const res = await event;
            // console.log(res, email.value);
            // if (!res.valid) return;
            account.changeEmail(email.value);
            // account.changePopLogin(false);
            // account.changePopLoginVerify(true);
            err.value = "";
            // router.push("/loginverify");

            shows.value = true;
            // location.href = "/reward"
            return;
        } else {
            // busyAlert()
            // toast(obj.info);
            err.value = obj.info;
            return;
        }
    } catch (err) {
        busyAlert()
        console.log('系统有误', err)
    }
};


</script>

<style lang="less" scoped>
@import url("../index.less");

.pp {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.bbs {
    width: fit-content;
    margin: 30px auto;
    box-sizing: border-box;
    // background: #ff0000;
    // transform: scale(1.5);
    transform-origin: center top;
    // transition: all 300ms;
    opacity: 0;
    animation: move 1s;
    animation-fill-mode: forwards;
}
@keyframes move {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.bbs-show{
    animation: move 300ms;
}

.tt3 {
    font-size: 20px;
    text-align: center;
    color: var(--main);
    margin: 20px;
}

.p-img {
    width: 60%;
    margin: 40px auto;
    display: block;
}

.form-width {
    width: 400px;
}

.ints {
    width: 100%;
    margin-bottom: 40px;
}

.check {
    margin-top: 48px;
}

.n-btn {
    margin-top: 40px;
    margin-bottom: 10px;
    width: 100%;
}

.no-ac {
    margin: 10px 0 30px;
}

.check-tip {
    margin-left: 10px;
}

.agree {
    margin-top: 40px;
    margin-bottom: 12px;
}
</style>
